/**
* @file  学生学号/教师工号滚动分页下拉框
* @author: lsfang
*/
<template>
    <div>
        <el-select
            v-model="selectVal"
            style="width: 100%"
            filterable
            clearable
            v-el-select-loadmore="loadmore"
            :filter-method="dataFilter"
            @visible-change="clearHeadId"
            @change="returnVal"
            :disabled='ifDisabled'
            :loading='ifLoading'
        >
            <el-option
                v-for="item in dataList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
        </el-select>
    </div>
</template>

<script>
// import InterSchoolComAppApi from 'common/src/api/interSchoolExchange/InterSchoolComApp'
import UTILS from "common/src/utils/utils";
import axios from 'axios'
export default {
    directives: {
        'el-select-loadmore': {
            bind(el, binding) {
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector(
                    '.el-select-dropdown .el-select-dropdown__wrap'
                )
                SELECTWRAP_DOM.addEventListener('scroll', function() {
                    /**
                     * scrollHeight 获取元素内容高度(只读)
                     * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                     * clientHeight 读取元素的可见高度(只读)
                     * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                     * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                     */
                    const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
                    if (condition) {
                        binding.value()
                    }
                })
            }
        }
    },
    props: {
        val: {
            type: String,
            default: ''
        },
        valId: {
            type: String,
            default: ''
        },
        queryType: {
            type: Number,
            default: null
        },
        queryFaculty: {
            type: String,
            default: ''
        },
        ifDisabled: {
            type: Boolean,
            default: false
        },
        URL: {
            type: String,
            default: ''
        }
    },
    watch: {
        // 编辑页面  数据回显
        val: {
            handler(newVal) {
                if (newVal) {
                    let parm = {
                        pageNum_: 1,
                        pageSize_: 10,
                        codeOrName: newVal,
                        queryType: this.queryType,
                        queryFaculty: this.queryFaculty
                    }
                    this.getList(parm)
                    this.selectVal = newVal
                } else {
                    this.selectVal = ''
                }
            },
            deep: true,
            immediate: true
        }
    },

    data() {
        return {
            formData: {
                pageNum_: 1,
                pageSize_: 10,
                codeOrName: '',
                queryType: '', // 0：学生 1：老师
                queryFaculty: ''
            },
            dataList: [],
            selectVal: '',
            ifLoading: true
        }
    },
    created() {

    },

    methods: {
        returnVal() {
            // 当下拉框数据改变时，将选中数据返回给父页面
            this.$emit('returnVal', this.selectVal)
            // 传label值
            let valueToLabel = ''
            if (this.dataList.length > 0 && this.selectVal) {
                valueToLabel = UTILS.translateLabel(this.dataList, this.selectVal, 'value', 'label')
            }
            this.$emit('return-value-to-label', valueToLabel,this.valId)
            
        },
        dataFilter(val) {
            let _this = this
            this.dataList = []
            this.formData.pageNum_ = 1
            this.formData.codeOrName = val
            // 每次进来的时候都将之前的清除掉，
            // 如果还没到500ms的时候就将之前的清除掉，
            // 这样就不会触发之前setTimeout绑定的事件，
            //  如果超过500ms，之前的事件就会被触发下次进来的时候同样清除之前的timer
            clearTimeout(_this.timer)
            _this.timer = setTimeout(function() {
                _this.dataList = []
                // 切换为搜索
                _this.getList(_this.formData)
            }, 500)
        },
       async getList(formData) {
            let _this = this
            this.formData.queryType = this.queryType
            this.formData.queryFaculty = this.queryFaculty
            // InterSchoolComAppApi.studentOrTeacherPageList(formData).then(res => {
            //     if (res.data) {
            //         res.data.list.forEach(val => {
            //             this.dataList.push({
            //                 label: val.codeOrName,
            //                 value: val.id
            //             })
            //         })
            //     }
            // })
            const res = await axios.post(_this.URL, formData, {
                    headers: { 'X-Token': localStorage.getItem('sessionid') || '' }
                })
                if (res.data && res.data.code === 200) {
                        this.ifLoading = false
                        res.data.data.list.forEach(val => {
                            this.dataList.push({
                                label: val.codeOrName,
                                value: val.id
                            })
                        })
                    }
                 
        },
        clearHeadId(val) {
            // 每次打开下拉框  重新刷新数据
            this.ifLoading = true
            if (val && !this.selectVal) {
                this.formData.pageNum_ = 1
                this.formData.codeOrName = ''
                this.dataList = []
                this.getList(this.formData)
            } else if (val && this.selectVal) {
                this.formData.pageNum_ = 1
                this.formData.codeOrName = this.selectVal
                this.dataList = []
                this.getList(this.formData)
            }
        },
        loadmore() {
            // 每次滚动  多加载一页数据
            this.formData.pageNum_++
            this.getList(this.formData)
        }
    }
}
</script>
